{%extends "base.html"%}
{%block body%}

<script type="text/javascript" src="/static/tmaps.js"></script>
<script type="text/javascript" src="/static/json2.js"></script>

<script type="text/javascript">
var globalNode = 0;
var saved = true;
var playing = false;
var numPosts = {{ numroutes }} ;

		var myObj = '' ; 
		var myGPX = '';
		var parkingArray = '';
		var restroomsArray = '';
 
</script>

</head>



<body onload="startUP()" onunload="GUnload()"   >

<div id="appFrame">

{% include "title.html" %}

<div id="leftImages">
<div id="introWrap">
	<h3>Maps generated from geotagged images in on-line web albums and GPX  </h3>
			{%if user %}
				<p class="linkBanner" id="editme" style="visibility:visible"> 
				<a href="/routeList" class="uline" >EDITOR</a> 
		 		 </p>
				
			{%endif%}

<div id="helpNode" > </div>

<div id="searchBox">

  <form method="post" id="frmSearchBox" action="#">


<table>
<tr> <td><b>Search Routes:</b> </td> </tr>
<tr><th>State</th><th>Type</th><th>Organization</th><th>Location</th>
</tr><tr><td>
	<select name="states"  id="states" style="width: 6em;" class="nav">
		{% for stt in states %}
  			<option  value="{{ stt }}" {% ifequal stt "All" %} selected="selected" {% endifequal %}  >{{ stt }}</option>
		{% endfor %}	
	</select>
</td><td>
	<select name="types" id="types" style="width: 6em;" class="nav">
		{% for typ in types %}
 	 		<option  value="{{ typ }}" {% ifequal typ "All" %} selected="selected" {% endifequal %}  >{{ typ }}</option>
		{% endfor %}	
	</select>
</td><td>
	<select name="orcas" id="orcas" style="width: 6em;" class="nav">
		{% for orc in orcas %}
  			<option  value="{{ orc }}" {% ifequal orc "All" %} selected="selected" {% endifequal %}  >{{ orc }}</option>
		{% endfor %}	
	</select>
</td><td>
	<select name="locas" id="locas" style="width: 10em;" class="nav">
		{% for loc in locas %}
  			<option  value="{{ loc }}" {% ifequal loc "All" %} selected="selected" {% endifequal %}  >{{ loc }}</option>
		{% endfor %}	
	</select>
</td><td>
	<input type="button" name="btnSearch" value="Search" onclick="searchRoutes();" class="nav"/>
</td></tr></table>
</form>

 </div>
	
	{% for route in routes %}

	 <div id = "{{ forloop.counter }}_nodepad" onmouseover="selectObj( {{ forloop.counter }},{{ route.latitude }},{{ route.longitude }} ); return false;" class="imgdata" >
		<div class="banner" >
		    
		<button type="button" id="btnPlay" name="btnPlay" class="nav" onclick="playView('{{ route.key }}','{{ route.latitude }}','{{ route.longitude }}','{{ route.zoom }}')" > play </button>

<button type="button" id="btnMap" name="btnMap" class="nav" onclick="mapView('{{ route.key }}','{{ route.latitude }}','{{ route.longitude }}')" > map </button>

<button type="button" id="{{ forloop.counter }}_btnLink" name="{{ forloop.counter }}_btnLink" class="nav" onclick="showLink('{{ route.key }}', '{{ forloop.counter }}')" > permalink </button>

		
		</div> 
		<ul > 
			<li> 	       {{ route.routeName }} </li>
			<li> <b>Location:  &nbsp;  </b>                {{route.locationName}}</li>
			<li> <b>state:  &nbsp;  </b>                {{route.state}}</li>
			<li> <b> Description: &nbsp; </b>              {{route.intro }}</li>
			<li> <b> Author: &nbsp; &nbsp; </b>            {{ route.author }}</li>
	                
		</ul> 
		<img src="{{ route.img }}?imgmax=512" alt="{{route.routeName }}"   /> 

	</div>
{% endfor %}
</div>
</div>
{% include "builderMap.html" %}
</div>

</body>
{% endblock %}
